<template>
  <div class="editor">
    <el-container>
      <el-header :class="{animated:isActive,zoomOutUp:isActive}">
        <el-row>
          <el-col :span="6">
            <span class="title"
                  :key="item"
                  v-for="item in musicTitle.length">{{musicTitle[item]}}</span>
          </el-col>
          <el-col :span="11">
            <el-menu mode="horizontal"
                     background-color="#fff"
                     @select="handleSelect"
                     text-color="purple"
                     active-text-color="purple">
              <el-menu-item index="1">华语</el-menu-item>
              <el-menu-item index="2">流行</el-menu-item>
              <el-menu-item index="3">摇滚</el-menu-item>
              <el-menu-item index="4">民谣</el-menu-item>
              <el-menu-item index="5">电子</el-menu-item>
              <el-menu-item index="6">轻音乐</el-menu-item>
            </el-menu>
          </el-col>
          <el-col :span="7">
            <div class="music-search">
              <el-input placeholder="请输入内容"
                        class="input-with-select">
                <el-select slot="prepend"
                           v-model="searchValue"
                           placeholder="请选择">
                  <el-option label="歌曲"
                             value="1"></el-option>
                  <el-option label="歌手"
                             value="2"></el-option>
                </el-select>
                <el-button slot="append"
                           icon="el-icon-search"></el-button>
              </el-input>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <el-main :class="{animated:isActive,zoomOutRight:isActive}">
        <el-row>
          <el-col :span="12"
                  :offset="12">
            <MovieList @getDetail="handleMoviePlay"></MovieList>
          </el-col>
        </el-row>
      </el-main>
      <el-footer :class="{animated:isActive,zoomOutDown:isActive,clearfix:true}">
        <div class="movie-footer__page">
          <Page style="padding:10px"
                @currentPage="getCurrentPage"
                :total="total"></Page>
        </div>
        <el-tabs type="border-card">
          <el-tab-pane>
            <span slot="label"><i class="el-icon-headset"></i> 音乐</span>
            <MusicList></MusicList>
          </el-tab-pane>
          <el-tab-pane>
            <span slot="label"><i class="el-icon-camera"></i> 电影</span>
            <MusicList></MusicList>
          </el-tab-pane>
        </el-tabs>
      </el-footer>
      <div :class="{animated:isActive,zoomOutLeft:isActive,movie_player:true}">
        <!-- <Music></Music> -->
        <vue-plyr ref="plyr"
                  playsinline
                  controls
                  style="width: 90%;margin: 5px auto;">
          <video :poster="movieDetail.cover"
                 :src="movieDetail.brs[240]">
            <source v-for="(item,index) in movieDetail.brs"
                    :key="index"
                    :src="item"
                    type="video/mp4"
                    :size="index">
            <track kind="captions"
                   label="English"
                   srclang="en"
                   :src="movieDetail.cover"
                   :playsinline="true"
                   :autoplay="true"
                   default>
          </video>
        </vue-plyr>
      </div>
    </el-container>
  </div>
</template>
<script>
import Music from '../components/music.vue'
import SingerList from '../components/singer-list.vue'
import '../icons/start.svg'
import '../icons/start_red.svg'
import MusicList from '../components/card-list.vue'
import Page from '../components/Page.vue'
import MovieList from '../components/movie-list.vue'
import { getMovieList, getMovieDetail, test, getMusicList } from '../request/api.js'

export default {
  name: 'editor',
  components: {
    // Music,
    // SingerList,
    MusicList,
    Page,
    MovieList
  },
  data () {
    return {
      publicPath: process.env.BASE_URL,
      searchValue: '',
      musicTitle: 'Stay Foolish Stay Hungry',
      animationImage: false,
      animationStyle: {},
      src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
      total: 1,
      currentPage: 0,
      isActive: false,
      totalList: [],
      movieDetail: {
        cover: `${process.env.BASE_URL}img/login.jpeg`,
        brs: {
          720: `${process.env.BASE_URL}movie/movie.mkv`,
          1080: `${process.env.BASE_URL}movie/movie.mkv`
        }
      }
    }
  },
  created () {
    this.titleStart()
  },
  mounted () {
    console.log(this.$refs.plyr)
  },
  computed: {
    player () {
      return this.$refs.plyr.player
    }
  },
  watch: {},

  methods: {
    handleSelect () {
    },
    titleStart () {
      setInterval(() => {
        // 截取首个字符
        let head = this.musicTitle.substring(0, 1)
        // 截取除首个字符外的所有字符
        let foot = this.musicTitle.substring(1)
        // 拼接后重新渲染text属性值
        this.musicTitle = foot + head
      }, 300)
    },
    getCurrentPage (val) {
      this.currentPage = val
    },
    handlePrevEnter (val) {
      this.isActive = val
    },
    handleLeave () {
      this.isActive = -1
    },
    handleImageStartEnter (val) {
      this.isActive = val
    },
    handleMoviePlay (item) {
      console.log(item)
      if (typeof item.id !== 'undefined' && item.id !== '') {
        getMovieDetail({ mvid: item.id }).then((res) => {
          if (res.code === 200) {
            this.movieDetail = res.data
            // this.$refs.plyr.player.media.play()
          } else {
            this.$message.error('获取失败')
          }
        })
      } else {
        this.$message.warning('视频id获取失败')
      }
      // getMusicList({ type: 0 }).then((res) => {
      //   console.log(res)
      // })
    }
  }
}
</script>

<style lang="scss">
@import url("https://fonts.googleapis.com/css?family=Fredoka+One|Open+Sans:300");
@import url("https://fonts.googleapis.com/css?family=Varela+Round&display=swap");
*,
*::before,
*::after {
  box-sizing: border-box;
}
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.el-header {
  z-index: 999;
  background-color: #ffffff;
  // position: fixed;
  // top: 0rem;
  // left: 0rem;
}

.el-main {
  padding: 2px !important;
  height: 495px;
}

.title {
  display: inline-block;
  line-height: 60px;
  text-align: center;
  font-size: 25px;
  /*font-family: 'Roboto Condensed', sans-serif;*/
  font-family: "Fredoka One", cursive;
  font-weight: 700;
  color: purple;
  text-shadow: purple 1px 0 0, purple 0 1px 0, purple -1px 0 0, purple 0 -1px 0;
  animation: bounce 0.95s cubic-bezier(0.05, 0, 0.2, 1) infinite alternate;
  transform: translate3d(0, 0, 0);
  margin-top: 0.5em;
}

.el-menu .el-menu-item {
  padding: 0 38px !important;
}

.input-with-select {
  width: 90%;
}

.music-search {
  width: 100%;
  padding: 10px;
}

.movie_player {
  position: absolute;
  top: 65px;
  left: 0;
  right: 50%;
  bottom: auto;
}
.movie_player .plyr__poster {
  height: 0 !important;
}
@keyframes bounce {
  0% {
    transform: translate3d(0, 0, 0);
    text-shadow: rgba(128, 0, 128, 0.4) 0 0 0.05em;
  }
  100% {
    transform: translate3d(0, -1em, 0);
    text-shadow: rgba(128, 0, 128, 0.4) 0 1em 0.35em;
  }
}

@keyframes animationName {
  0% {
    opacity: 1;
    transform: scale(1) translate(100px, 100px);
  }
  0% {
    opacity: 0.5;
    transform: scale(1) translate(500px, 500px);
  }
  100% {
    opacity: 1;
    transform: scale(0.5) translate(1000px, 800px);
  }
}

.musicListAnimation-enter-active {
  animation: animationName 1s;
}

.el-main .el-card__body {
  padding: 0 20px !important;
}

.component__scroll {
  height: 100%;
}

.component__scroll .el-scrollbar__wrap {
  overflow-x: auto;
}

.music-list-card ul li {
  margin: 10px auto;
}

.music-song {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  height: 65px;
}

.music-song > span {
  display: inline-block;
  margin: 0 auto;
  height: 40%;
}

.card-movie ul li {
  margin: 15px auto;
}
.el-footer {
  height: 265px !important;
  min-height: 265px;
  margin: 5px auto;
  padding: 2px !important;
  position: fixed;
  bottom: 0rem;
  left: 0;
}
.movie-footer__page {
  height: 40px;
  width: 10%;
  float: right;
  z-index: 1000;
  position: relative;
}
</style>
